<template>
  <el-table :data="tableData"
            show-summary
            stripe>
    <el-table-column v-for="(item,index) in tableConfig"
                     :key="index"
                     :prop="item.prop"
                     :label="item.label"
                     :sortable="item.sortable? item.sortable : false"
                     :align="item.align ? item.align : center"
                     :width="item.width ? item.width : 120">
      <template slot-scope="scope">
        <column-hover :item="item.prop"></column-hover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getMLists } from '@/api/maintenance'
import ColumnHover from './column-hover'

export default {
  name: 'vPageTable',
  props: {
    tableConfig: {
      type: Array,
      default() {
        return [
          {
            prop: 'name', // 绑定字段
            label: '名称', // 列名
            expand: false, // 展开
            sortable: true, // 排序 默认false
            width: '120', // 列宽，默认120px
            align: 'center', // 对齐 center、left、rigth,默认 center
            hover: true // hover显示
          },
          {
            prop: 'name1', // 绑定字段
            label: '名称2', // 列名
            expand: false,
            align: 'center' // 对齐 center、left、rigth
          },
          {
            prop: 'name2', // 绑定字段
            label: '名称3', // 列名
            expand: false,
            sortable: true, // 排序
            align: 'center' // 对齐 center、left、rigth
          }
        ]
      }
    }
  },
  data() {
    return {
      tableData: [
        {
          name: 'test21312312313213123',
          name1: '1'
        },
        {
          name: 'test212312313131231313333333333333',
          name1: '2'
        },
        {
          name: 'test3',
          name1: '3'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    getTableData() {
      getMLists().then(res => {

      })
    }
  },
  components: {
    ColumnHover
  }
}
</script>
